<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script type="text/javascript" src="../../js/vue.js"></script>
</head>
<body>
<div id="root">
</div>


<script type="text/javascript">

  //第一步,创建组件
  const student = Vue.extend({
    template: `
      <div>
        <h2>学生姓名:{{ name }}</h2>
        <h2>学生年龄:{{ age }}</h2>
      </div>
    `,
    data() {
      return {
        name: '张三',
        age: '29'
      }
    }

  });

  const school = Vue.extend({
    template: `
      <div>
        <h2>学校名称:{{ name }}</h2>
        <h2>学校地址:{{ address }}</h2>
        <student></student>
      </div>
    `,
    data() {
      return {
        name: '二师',
        address: '高新二路'
      }
    },
    components: {student}
  })

  const hello = Vue.extend({
    template: `
      <h2>{{ msg }}</h2>
    `,
    data() {
      return {msg: '组件嵌套'}
    }
  })
  const app = Vue.extend({
    template:`
        <div>
          <school></school>
          <hello></hello>
        </div>
    `,
    components: {school, hello}
  })

  //第二步注册局部组件
  var vm = new Vue({
    el: '#root',
    template:`<app></app>`,
    components: {
      app
    }
  });

</script>
</body>
</html>
